import React, { useEffect } from 'react'
import { WebView } from 'react-native-webview'
import { RouterKey } from '@NAVIGATION/Navigation'
import EStyleSheet from 'react-native-extended-stylesheet'
import useParams from '@HOOKS/useParams'
import { useNavigation } from '@react-navigation/native'

const WebViewCom: React.FC = () => {
  const { url, title } = useParams<RouterKey.WebView>()
  const navigation = useNavigation()

  useEffect(() => {
    navigation.setOptions({
      title,
    })
  }, [navigation, title])
  return (
    <WebView
      source={{ uri: url }}
      style={styles.webView}
    />
  )
}

export default WebViewCom

const styles = EStyleSheet.create({
  webView: {
    flex: 1,
  },
})
